<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--meta http-equiv="X-UA-Compatible" content="IE=edge" /-->
<title>jQuery Form Changer</title>
<link rel="stylesheet" type="text/css" href="styles/formChanger.css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.formChanger.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
(function($){
	$(function(){
		$('#x-form')
			.applyChanger({
				all: {
					options: {
						wraps: 3,
						lists: 5, 
						listsIn: false
					}
				},
				textarea: {
					options: {
						wraps: 5
					}
				}
			});
	});
	
	$(function(){
		$('#disableEmail').click(function(){
			$('#email').changerDisable();
			return false;
		});	   
	});
	
	$(function(){
		var validator = $('#x-form').validate({
			groups: {
				bornDate: 'birthday birthmonth birthyear'
			},
			focusInvalid: false,
			rules: {
				lastname: {
					required: true	
				},
				firstname: {
					required: true	
				},
				middlename: {
					required: true	
				},
				cardNumber: {
					required: true	
				},
				birthday: {
					required: true	
				},
				birthmonth: {
					required: true	
				},
				birthyear: {
					required: true	
				},
				vacancy: {
					required: true	
				},
				email: {
					required: true	
				},
				phone: {
					required: true	
				},
				address: {
					required: true	
				},
				file: {
					required: true	
				}
			},
			messages: {
				
			},
			errorPlacement: function(error, element){
				if(element[0].name != 'birthday' && element[0].name != 'birthmonth' && element[0].name != 'birthyear') element.data().changer.wrap.after(error);
				else $('#birthyear').data().changer.wrap.after(error);
			},
			highlight: function(element, errorClass) {
				$(element).data().changer.wrap.addClass(errorClass);
			},
			unhighlight: function(element, errorClass) {
				$(element).data().changer.wrap.removeClass(errorClass);
			},
			invalidHandler: function(form){
				
			},
			submitHandler: function(form){
				
			}
		});
	});
})(jQuery);
</script>
</head>

<body>

		<h1><span class="blueTextColor">jQuery Form Changer</span> plugin - Forms is comfortable and nicely</h1>
        
        <a id="disableEmail" href="#">Выключить e-mail</a>
        
		<form id="x-form" action="docs/jQuery Form Changer plugin Forms is comfortable and.pptx" method="post">
			<div class="row">
				<label for="area">Текстареа</label><textarea data-placeholder="бла бла бла" name="area" id="area"></textarea>
			</div>
            <div class="row">
				<label for="lastname">Фамилия</label><input class="cancel" data-placeholder="введите свою фамилию" type="text" name="lastname" id="lastname"/>
			</div>
			<div class="row">
				<label for="firstname">Имя</label><input data-placeholder="введите своё имя" type="text" name="firstname" id="firstname"/>
			</div>
			<div class="row">
				<label for="middlename">Отчество</label><input data-placeholder="введите своё отчество" type="text" name="middlename" id="middlename"/>
			</div>
            <div class="row">
				<label for="cardNumber">Номер банковской карты</label><input data-placeholder="введите номер своей банковскоий карты" type="password" name="cardNumber" id="cardNumber"/>
			</div>
			<div class="row">
				<label for="birthday">Дата рождения</label><input data-placeholder="дд" type="text" name="birthday" id="birthday"/><select name="birthmonth" id="birthmonth">
					<option value="">Месяц</option>
					<option value="1">Январь</option>
					<option value="2">Февраль</option>
					<option value="3">Март</option>
					<option value="4">Апрель</option>
					<option value="5">Май</option>
					<option value="6">Июнь</option>
					<option value="7">Июль</option>
					<option value="8">Август</option>
					<option value="9">Сентябрь</option>
					<option value="10">Октябрь</option>
					<option value="11">Ноябрь</option>
					<option value="12">Декабрь</option>
				</select><input data-placeholder="гггг" type="text" name="birthyear" id="birthyear"/>
			</div>
			<div class="row">
				<label for="vacancy">Желаемая вакансия</label><select name="vacancy" id="vacancy">
					<option value="">Вакансия</option>
                    <optgroup label="IT">
                        <option value="1">Вакансия 1</option>
                        <option value="2">Вакансия 2</option>
                        <option value="1">Вакансия 1</option>
                        <option value="2">Вакансия 2</option>
                        <option value="1">Вакансия 1</option>
                        <option value="2">Вакансия 2</option>
                        <option value="1">Вакансия 1</option>
                        <option value="2">Вакансия 2</option>
                        <option value="1">Вакансия 1</option>
                    </optgroup>
                    <optgroup label="Бухгалтерия">
                        <option value="2">Вакансия 2</option>
                        <option value="1">Вакансия 1</option>
                        <option value="2">Вакансия 2</option>
                        <option value="1">Вакансия 1</option>
                        <option value="2">Вакансия 2</option>
                    </optgroup>
                    <optgroup label="HR">
                        <option value="1">Вакансия 1</option>
                        <option value="2">Вакансия 2</option>
                        <option value="1">Вакансия 1</option>
                        <option value="2">Вакансия 2</option>
                        <option value="1">Вакансия 1</option>
                        <option value="2">Вакансия 2</option>
                    </optgroup>
				</select>
			</div>
			<div class="row">
				<label for="email">e-mail</label><input data-placeholder="example@example.com" type="text" name="email" id="email"/>
			</div>
			<div class="row">
				<label for="phone">Телефон</label><input data-placeholder="+7(123) 465-78-90" type="text" name="phone" id="phone"/>
			</div>
			<div class="row">
				<label for="address">Адрес</label><input data-placeholder="352700, ..." type="text" name="address" id="address"/>
			</div>
			<div class="row file">
				<label for="file">Файл с резюме</label><input type="file" name="file" id="file" data-placeholder="выберите файл" />
			</div>
            <div class="row buttons">
            	<input type="submit" value="Отправить" />&nbsp;&nbsp;<input type="reset" value="Сброс" />
            </div>
		</form>

</body>
</html>